<template>
	<view>
		<NavBar title="已预约疗程" backTo="prev"></NavBar>
		<view class="topAttached">
	        <view class="header">预约待服务</view>
	        <view class="content">请及时到店，凭借预约信息享受服务</view>
        </view>
		
		<view class="tip" v-if="appointmentList.length == 0">
			暂无预约
		</view>
		
		<view class="newTreatmentListbtn_wrap" v-if="appointmentList.length == 0">
		    <view class="newTreatmentListbtn" @click="handleNewTreatmentListBtn">查看最新疗程</view>
	    </view>
		
		<view class="appointmentList" v-for="(item, index) in appointmentList" :key="index" v-if="appointmentList">
			<view class="appointment_wrap">
				<view class="header">预约信息</view>
				<view class="info">
				    <view class="left_tip">预约门店</view>
				    <view class="right_content">{{item.store}}</view>
				</view>
				<view class="info">
				    <view class="left_tip">门店地址</view>
				    <view class="right_content">{{item.address}}</view>
				</view>
				<view class="info">
				    <view class="left_tip">门店电话</view>
				    <view class="right_content">{{item.phone}}</view>
				</view>
				<view class="info">
				    <view class="left_tip">预约疗程</view>
				    <view class="right_content">{{item.treatment}}</view>
				</view>
				<view class="info">
				    <view class="left_tip">预约时间</view>
				    <view class="right_content">{{item.date}} {{item.time}}</view>
				</view>
				<view class="info">
				    <view class="left_tip">备注</view>
				    <view class="right_content">{{item.remark}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import {Request,getGlobalData} from '@/util.js';
	const domain = getGlobalData('domain');
	const openid = uni.getStorageSync('openid');
	
	export default {
		components:{
			NavBar
		},
		data(){
			return {
				appointmentList:[]
			}
		},
		onShow(){
			Request(domain+"/client/appointment/unfinishedAppointmentList",{openid:openid}).then((res)=>{
				this.appointmentList = res.data.data;
				console.log(this.appointmentList);
				
			})
		},
		methods:{
			handleNewTreatmentListBtn(){
				uni.switchTab({
		            url:"/pages/index/index"
		        })
			}
		}
	}
</script>

<style lang="less">
	@import '../../uni.less';
	page{
		background-color: @background_color;
		padding-bottom: @tab_bar_height;
	}
</style>

<style scoped lang="less">
	.topAttached{
		width:90%;
		height:185rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin:0 auto;
		margin-top:180rpx;
		display: flex;
		flex-direction: column;
		
		.header{
			margin-left: 40rpx;
			margin-top: 35rpx;
			font-size: 42rpx;
			color: #5C4141;
			font-weight: 500;
		}

		.content{
			margin-left: 40rpx;
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #D1A8A8;
		}
	}

	.tip{
		text-align: center;
		color:#D1A8A8;
		margin-top: 120rpx;
	}

	.appointmentList{
		width:90%;
		margin: 0 auto;
		margin-top: 20rpx;
		.appointment_wrap{
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 35rpx;
			padding-bottom: 35rpx;
			display: flex;
			flex-direction: column;
			.header{
				border-bottom: 2rpx solid #F8F0EF;
				width: 90%;
				margin: 0 auto;
				margin-top: 25rpx;
				margin-bottom: 30rpx;
				padding-top: 15rpx;
				padding-bottom: 30rpx;
				font-size: 35rpx;
				margin-top: 25rpx;
				color: #D1A8A8;
			}
			.info{
				width: 90%;
				margin-top:10rpx;
				display:flex;
				margin: 0 auto;
				margin-bottom: 28rpx;
				.left_tip{
					width:20%;
					font-size: 28rpx;
					color: #c3c3c3;
				}

				.right_content{
					font-size: 28rpx;
					color:#4D4D4D;
					margin-left: 32rpx;
					width:80%;
				}
			}

			.cancel_btn_wrap{
				width:100%;
				height: 65rpx;
				line-height: 65rpx;
				margin-top: 20rpx;
				margin-bottom: 30rpx;
				.cancel_btn{

					width: 270rpx;
					color: #fff;
					text-align: center;
					height: 100%;
					margin: 0 auto;
					background-color: #D1A8A8;
					border-radius: 45rpx;
					font-weight: 400;
					font-size: 35rpx;
				}
			}
		}
	}

	.newTreatmentListbtn_wrap{
		margin-top: 130rpx;
		height: 70rpx;
		line-height: 70rpx;
		.newTreatmentListbtn{
			width:300rpx;
			height:100%;
			margin:0 auto;
			text-align: center;
			background-color: #D1A8A8;
			border-radius: 40rpx;
			font-weight: 500;
			color:#fff;
		}
	}
</style>